<template>
  <div class="withdraw-config">
    <!-- 搜索栏 -->
    <div class="search-block">
      <div class="left-group">
        <el-button class="search-btn" @click="operate('add')" size="medium" type="primary">新增</el-button>
      </div>
    </div>
    <!-- 数据表 -->
    <div class="data-table">
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(211, 215, 212, 0.5)"
        :data="tableData"
        stripe
        style="width: 100%"
        header-cell-class-name="headerStyle"
      >
        <el-table-column align="center" prop="currency" label="币种"></el-table-column>
        <el-table-column align="center" prop="category" label="自动审核分类">
          <template slot-scope="scope">
            <span>{{scope.row.category|widthdrawCategory}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="auto_review_limit" label="自动审核范围"></el-table-column>
        <el-table-column align="center" prop="real_name_limit" label="实名额度"></el-table-column>
        <el-table-column align="center" prop="no_real_name_limit" label="未实名额度"></el-table-column>
        <el-table-column align="center" prop="is_active" label="自动审核">
          <template slot-scope="item">
            <el-switch
              class="switch"
              style="display: block"
              v-model="item.row.active"
              @change="setAuditStatus(item.row)"
              inactive-color="#52556d"
              active-color="#ff7e03"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="inviter" label="操作" width="150">
          <template slot-scope="item">
            <el-button type="text" @click="operate('edit',item.row)" class="edit-btn">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  编辑-->
      <transition name="fade">
        <editWithdrawConfig
          v-if="showDialog"
          @cancel="showDialog=false"
          @success="showDialog=false;search()"
          :operateData="operateData"
          :action="action"
          :currencyList="currencyList"
        ></editWithdrawConfig>
      </transition>
    </div>
  </div>
</template>

<script>
import { GetWithdrawLimit, EditWithdrawLimit } from "./Assets.service";
import editWithdrawConfig from "@/components/AssetsManage/editWithdrawConfig.vue";
import { supTokens } from "@/views/FlashChange/FlashChange.service";

export default {
  components: {
    editWithdrawConfig
  },
  data() {
    return {
      loading: false,
      showDialog: false,
      action: null,
      operateData: {},
      currencyList: [],
      pages: {
        page: 1,
        size: 10
      },
      tableData: [],
      total: 10
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let res2 = await supTokens();
      this.currencyList = res2.data || [];
      this.search();
    },
    async search() {
      this.loading = true;
      const res = await GetWithdrawLimit(this.pages);
      let list = res.data ? res.data : [];
      this.tableData = this.formatSwitch(list);
      this.loading = false;
    },
    operate(action, row) {
      this.showDialog = true;
      this.action = action;
      this.operateData = row || {};
    },
    async setAuditStatus(row) {
      this.loading = true;
      let msg = row.active === true ? "打开" : "关闭";
      let type = row.active == true ? 1 : 2;
      let param = {
        currency: row.currency,
        category: row.category,
        autoReviewLimit: row.auto_review_limit,
        realNameLimit: row.real_name_limit,
        noRealNameLimit: row.no_real_name_limit
      };
      const data = await EditWithdrawLimit({ ...param, switch: type });
      this.loading = false;
      if (data.code === 1) {
        this.$notify.success({
          title: "提示",
          message: `自动审核${msg}成功`
        });
      } else {
        this.$notify.error({
          title: "提示",
          message: `自动审核${msg}失败`
        });
        this.search();
      }
    },
    formatSwitch(list) {
      list.forEach(item => {
        if (item.is_active == 1) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
      return list;
    }
  }
};
</script>

<style lang="scss" scoped>
.withdraw-config {
  .search-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 25px 30px;
    border-radius: 5px;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 15px;

    .item-msg {
      display: inline-block;
      margin-right: 20px;
      height: 60px;
      line-height: 60px;
      font-size: 1 size= "medium" 4;
      color: $admin_font_param;

      label {
        display: inline-block;
        min-width: 50px;
        text-align: right;
        margin-right: 10px;
      }

      .el-input {
        width: 150px;
      }

      .el-select {
        width: 150px;
      }

      .el-date-editor {
        width: 270px;
      }
    }

    .search-btn {
      margin-left: 30px;
    }

    .search-btn:nth-of-type(1) {
      margin-left: 50px;
    }

    .left-group {
    }

    .right-group {
      display: flex;

      span {
        margin-right: 10px;
      }
    }
  }

  .data-table {
    padding-bottom: 20px;
    background: #fff;
    border-radius: 5px;
    margin-top: 30px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 15px;
  }

  .cancel-btn {
    color: red;
  }
}
</style>
